<style lang="less">
// @import "./home.less";
// @import "../../styles/common.less";
.content1{height: 33%;}
.title1{font-size:16px;color:#8196c1;font-weight: bold;height: 50px;line-height: 50px;}
.titConent1{text-align:center;height:calc(100% - 50px);}
.titAll1{padding:5% 0;}
.titleNum1{font-size:20px;color:#2c8fd7;font-weight: bold;}
.titleDes1{font-size:16px;color:#ffffff;}
.menutitle1{font-size:16px;color:#8196c1;font-weight: bold;width:70px;text-align: center;
position:relative;display:inline-block;top:-15px
}
.timegoods1 td{color:#fff;font-weight:bold;padding:5px 0;text-align: left;}
.tindex1{display: inline-block;border-radius: 50%;background:#484cdc;color:#fff;height:15px;width: 15px;}
.timegoodbody1 td{color:#ada7c1;padding: 2px 0;white-space: nowrap;}
.timegoodbody1 tr:nth-child(odd){
  background-color: #36426c !important;;
}
#huoyuan{font-size:10px}
</style>
<template>
  <div style="height:100%;overflow:hidden">
     <div style="background:#161c4c;">
       <div style="width:20%;display:inline-block"  v-for="(li,index) in menu" :key="`ff${index}`" >
            <div style="text-align:center">
                <img :src="li.src" alt="" style="width:40px;display:inline-block;margin-left:10px;position:relative;top:10px">
                <span class="menutitle1">{{li.num}}</span><br/>
                <span class="menutitle1" style="font-size:14px;margin-left:40px">{{li.title}}</span>
            </div>            
          </div>
     </div>
     <div style="margin-top:10px;height:calc(100% - 80px)">
         <div style="background:#161c4c;padding:10px;height:100%;box-sizing:border-box;">
          <Row :gutter="16" style="height:100%">
            <Col span="13" style="height:100%">
              <!-- 左 -->
              <div style="position:relative;top:30px">
                   <div style="float:left;margin-left:50px;margin-top:40px">
                       <span style="font-size:18px;color:#80adf3;padding-bottom:10px;font-weight:bold;display:inline-block">月环比增长</span><br/>
                       <span style="font-size:14px;color:#fff">{{month_add}}</span>
                    </div>
                   <div style="float:right;margin-right:50px">
                     <div style="text-align:right;font-size:20px;color:#80adf3;padding-bottom:15px;font-weight:bold">累计交易额</div>
                     <span v-for="li in estimateAmt" :key="li" :style="{fontSize:'40px',color:'#fff',backgroundImage: 'url('+ smallbg +')',backgroundSize:'100% 100%',padding:'8px 10px',margin:'0 10px'}">{{li}}</span>
                     <span>元</span>
                    </div>
              </div>  
              <chart-map :citys="citys" :moveLines="moveLines" style="height:100%"></chart-map>
              <!-- <div  ref="chart_map" :style="{paddingTop:'130px',background:'#1e2266',height:'760px',backgroundImage: 'url('+ bigbg +')',backgroundSize:'100% 100%'}">
              </div> -->
            </Col>
            <!-- 右 -->
            <Col span="11" style="height:100%">
              <Row type="flex" :gutter="16" align="top" class="code-row-bg" style="height:100%;">
                <Col span="12" class="content1">
                  <div class="title1">今日交易量</div>
                  <Row  type="flex" class="titConent1" :style="{backgroundImage: 'url('+ normalbg +')',backgroundSize:'100% 100%'}">
                      <Col span="12" class="titAll1">
                         <div class="titleNum1">{{today.huoyuan}}</div>
                         <div class="titleDes1">货源数（票）</div>
                      </Col>
                      <Col span="12" class="titAll1">
                         <div class="titleNum1">{{today.yundan}}</div>
                         <div class="titleDes1">订单数（车次）</div>
                      </Col>
                       <Col span="12" class="titAll1">
                         <div class="titleNum1">{{today.weituo}}</div>
                         <div class="titleDes1">委托金额（元）</div>
                      </Col>
                      <Col span="12" class="titAll1">
                         <div class="titleNum1">{{today.chengyun}}</div>
                         <div class="titleDes1">承运金额（元）</div>
                      </Col>
                  </Row>
                </Col>
                <Col span="12" class="content1">
                    <div class="title1">历史货物品类分布</div>
                    <div class="titConent1" :style="{backgroundImage: 'url('+ normalbg +')',backgroundSize:'100% 100%'}">
                      <chart-pie :value="goodsType"  :seriesName='"历史货物品类分布"' :show='false' :radius='radius' :titleColor='titleColor' style="height:100%;100%;" ></chart-pie>
                    </div>
                </Col>
                <Col span="12" class="content1">
                    <div class="title1">本月运营质量监测</div>
                    <div class="titConent1" :style="{backgroundImage: 'url('+ normalbg +')',backgroundSize:'100% 100%'}">
                      <Row style="height:100%">
                        <Col span="12" style="height:100%"> 
                          <ChartPan :value="wanchenglvNum" :text="wanchenglv"  style="width:120%;position:relative;left:-10%"></ChartPan>
                          <div style="color:#fff;position:relative;top:-18%;text-align:center" >完成率</div>
                        </Col>
                        <Col span="12" style="height:100%"> 
                        <ChartPan :value="huosunNum" :text="huosun"  style="width:120%;position:relative;left:-10%"></ChartPan>
                        <div style="color:#fff;position:relative;top:-18%;text-align:center" >货损货差</div>
                        </Col>
                      </Row> 
                    </div>
                </Col>
                <Col span="12" class="content1">
                    <div class="title1">本月发货量排名</div>
                    <div class="titConent1" :style="{backgroundImage: 'url('+ normalbg +')',backgroundSize:'100% 100%',paddingLeft:'5%'}">
                      <chart-bars :value="jiaoyi" :time="nowMonthArr" text="百吨"   subtext="" :show="true" style="height:125%;position:relative;top:-12%;width:100%;"></chart-bars>
                    </div>
                </Col>
                <Col  span="12" class="content1">
                    <div class="title1">实时货源</div>
                    <div id="huoyuan" style="overflow:hidden;position:relative" class="titConent1" :style="{backgroundImage: 'url('+ normalbg +')',backgroundSize:'100% 100%'}">
                      <div class="timegoods1" style="width:100%;text-align:left;" >
                          <td style="width:10%;display:inline-block">序号</td>
                          <td style="width:25%;display:inline-block">装货地</td>
                          <td style="width:25%;display:inline-block">卸货地</td>
                          <td style="width:20%;display:inline-block">货物</td>
                          <td style="width:20%;display:inline-block">数量</td>
                      </div>
                      <div id="review_box" @mouseover="rollStop()" @mouseout="rollStart(60)" style="overflow: hidden;height:100%;">
                           <table  style="overflow: hidden;width:100%;">
                              <tbody class="timegoodbody1" id="comment1" >
                                <tr v-for="(li,index) in timeGoods" :key="`time${index}`" >
                                  <td><span class="tindex1">{{index + 1}}</span></td>
                                  <td>{{li.beginAreaName}}</td>
                                  <td>{{li.endAreaName}}</td>
                                  <td>{{li.type}}</td>
                                  <td>{{li.goodWeight}}</td>
                                </tr>
                              </tbody>
                              <tbody class="timegoodbody1" id="comment2" >
                                <tr v-for="(li,index) in timeGoods" :key="`time${index}`" >
                                  <td><span class="tindex1">{{index + 1}}</span></td>
                                  <td>{{li.beginAreaName}}</td>
                                  <td>{{li.endAreaName}}</td>
                                  <td>{{li.type}}</td>
                                  <td>{{li.goodWeight}}</td>
                                </tr>
                              </tbody>
                            </table>
                            
                      </div>
                    </div>
                </Col>
                <Col span="12" class="content1">
                    <div class="title1">交易额增长趋势</div>
                    <div class="titConent1" :style="{backgroundImage: 'url('+ normalbg +')',backgroundSize:'100% 100%'}">
                      <ChartBars :value="jiaoyie" :time="jiaoyieTimeArr" text=""  subtext="" :show="false" style="height:125%;position:relative;top:-12%;width:100%;"></ChartBars>
                    </div>
                </Col>
              </Row>
            </Col>
          </Row>
        </div>
     </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts/map/js/china.js';
import {ChartPie,ChartPan,ChartBars,ChartMap} from './components/index.js'
import {getCityMonthGoodSum,getCitysMonthGoodSum,getMonthGoodSum,getToDayGoodSum,getToMonthGoodSum,getTypeGoodsSum,getGoodsOrderSum,getTmOrderSumVo,getOrderSumVo,getTmOrderStateSumVo} from "@/api/home"
import {getGoodsVoList} from '@/api/order'
import huoyuan from '@/assets/home/当前货源.png'
import qianyue from '@/assets/home/待签约.png'
import yunshu from '@/assets/home/运输中.png'
import jiesuan from '@/assets/home/待结算.png'
import kaipiao from '@/assets/home/待开票.png'
import bigbg from '@/assets/大.png'
import normalbg from '@/assets/中.png'
import smallbg from '@/assets/小.png'

export default {
  name: "home",
  components: {
      ChartPie,
      ChartPan,
      ChartBars,
      ChartMap
  },
  data() {
    return {
      timer: null,
      daping:huoyuan,//大屏
      moveLines:[],//地图城市线条
      citys:[],//城市地名
      estimateAmt:'',//累计交易额
      bigbg:bigbg,
      normalbg:normalbg,
      smallbg:smallbg,
      today:{},
      goodsType:[],//历史货物品类
      timeGoods:[],//实时货源
      jiaoyie:[],//交易额增长趋势
      jiaoyi:[],//本月发货量排名
      jiaoyieTimeArr:[],//交易额横轴时间
      nowMonthArr:[],//本月发货量横轴
      month_add:'',//月环比
      huosun:'货损货差',//货损货差
      huosunNum:'0',//货损货差
      wanchenglv:'完成率',
      wanchenglvNum:'0',//完成率
      testdata:[{
        data:[10,20,30,40,50,55,25,15,45,12,78,23],
        name: "双预防",
        type: "bar"}],
      menu:[
        {src:huoyuan,title:'当前货源',num:"0"},
        {src:qianyue,title:'待接单',num:"0"},
        {src:yunshu,title:'运输中',num:"0"},
        {src:jiesuan,title:'待结算',num:"0"},
        {src:kaipiao,title:'待开票',num:"0"},
      ],
      titleColor:'#fff',//饼图标题颜色
    };
  },
  mounted() {
    setTimeout(()=>{
     this.roll(60);
    },10)
    
  },
  methods: {
    roll(t) {
    var ul1 = document.getElementById("comment1");
    var ul2 = document.getElementById("comment2");
    var ulbox = document.getElementById("review_box");
    // ul2.innerHTML = ul1.innerHTML;
    ulbox.scrollTop = 0;
    this.rollStart(t);
},
rollStart(t) {
    var ul1 = document.getElementById("comment1");
    var ul2 = document.getElementById("comment2");
    var ulbox = document.getElementById("review_box");
    this.rollStop();
    this.timer = setInterval(()=>{
        // 当滚动高度大于列表内容高度时恢复为0 
        if (ulbox.scrollTop >= ul1.scrollHeight) {
            ulbox.scrollTop = 0;
        } else {
            ulbox.scrollTop++;
        }
    }, t);
},
rollStop(){
    clearInterval(this.timer);
},
    getData(){
      //实时数据
      getGoodsVoList({pageNumber: 1,pageSize: 10,status:0}).then(res=>{
        if(res.success){
           this.timeGoods = res.result.records
            for(let i=0;i<this.timeGoods.length;i++){
              this.timeGoods[i].type = this.$options.filters["GOOD_NEY_TYPE"](this.timeGoods[i].goodType,this.timeGoods[i].subGoodType)
            }
        }
      })
      // 菜单信息
      getGoodsOrderSum().then(res=>{
         if(res.success){
           this.menu[0].num = res.result.goodCnt
           this.menu[1].num = res.result.signCnt
           this.menu[2].num = res.result.trainCnt
           this.menu[3].num = res.result.dealCnt
           this.menu[4].num = res.result.receiptCnt
        }
      })
      //本月发货量排名 获取城市当月货物统计信息 
      getCityMonthGoodSum().then(res=>{
        if(res.success){
            let obj = {}
            let data = []
            obj.itemStyle = {
                normal: {
                   barBorderRadius: 8,
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#06B5D7'},                   //柱图渐变色
                            {offset: 0.5, color: '#44C0C1'},                 //柱图渐变色
                            {offset: 1, color: '#71C8B1'},                   //柱图渐变色
                        ]
                    )
                }
            }
            this.nowMonthArr = []
            for(let i=0;i<res.result.length;i++){
              data.push(res.result[i].goodWeight/100)
              this.nowMonthArr.push(res.result[i].cityVo.cityName)
            }
            obj.data = data
            obj.type = "bar"
            obj.name = "本月发货量排名"
            obj.barWidth = 15
            // if(this.jiaoyi.length<3){
            //   this.jiaoyi.push(obj)
            // }
             this.jiaoyi = []
             this.jiaoyi.push(obj)
        }
        // this.timeGoods = res.result
      })
      //地图 获取城市之间当月货物统计信息 
      getCitysMonthGoodSum().then(res=>{
        let arr = []
        let lineArr = []
        for(let i=0;i<res.result.length;i++){
           let obj = {}
           let objto ={}
           obj.name = res.result[i].beginCityVo.cityName
           obj.value = [res.result[i].beginCityVo.provinceLnt,res.result[i].beginCityVo.provinceLat]
           obj.symbolSize = 8
           obj.itemStyle = { normal: { color: "red" } }
           objto.name = res.result[i].endCityVo.cityName
           objto.value = [res.result[i].endCityVo.provinceLnt,res.result[i].endCityVo.provinceLat]
           objto.symbolSize = 8
           objto.itemStyle = { normal: { color: "red" } }
           arr.push(obj)
           arr.push(objto)
           let line = {}
           line.fromName = res.result[i].beginCityVo.cityName
           line.toName = res.result[i].endCityVo.cityName
           line.coords=[[res.result[i].beginCityVo.provinceLnt,res.result[i].beginCityVo.provinceLat],[res.result[i].endCityVo.provinceLnt,res.result[i].endCityVo.provinceLat]]
           lineArr.push(line)
        }
        this.citys = arr
        this.moveLines = lineArr
      })
      //月环比    近两个月的数据  
      getMonthGoodSum().then(res=>{
        if(res.success){
          if(res.result.length == 1){
             this.month_add = '0%'
          }else{
            let huanbi =  (res.result[0].estimateAmt - res.result[1].estimateAmt) / res.result[1].estimateAmt * 100
            this.month_add = huanbi.toFixed(2) + '%'
          }
        }
      })
      // 今日交易量 
      getToDayGoodSum().then(res=>{
        //  debugger;
        if(res.success){
           this.today.huoyuan = res.result.goodCnt
           this.today.weituo = res.result.estimateAmt
           this.today.yundan = res.result.orderCnt
           this.today.chengyun = res.result.orderEstimateAmt
        }
      })
      // 交易和增长趋势 
      getToMonthGoodSum().then(res=>{
        if(res.success){
          let obj = {}
          let data = []
          let arrTime = ['01','02','03','04','05','06','07','08','09','10','11','12']
          let arrText = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
          this.jiaoyieTimeArr = []
          for(let i=0;i<res.result.length;i++){
            data.push(res.result[i].estimateAmt)
            let text = res.result[i].statDate + ''
            text = text.substring(text.length-2)
            let k = arrTime.indexOf(text)
            let xText = arrText[k]
            this.jiaoyieTimeArr.push(xText)
          }
          obj.data = data
          obj.type = "line"
          obj.name = "交易额增长趋势"
          obj.itemStyle = { normal: {label : {show: true},color:'#2AC8FF', 
            lineStyle:{
            color:'#2AC8FF' 
            }}}
          this.jiaoyie = []
          this.jiaoyie.push(obj)
        }
      })
      // 历史货物分类
      getTypeGoodsSum().then(res=>{
        let colors = ['#26bdfa','#ca28fb','#5a48da','#72248e','#26bdfa','#ca28fb','#5a48da','#72248e']
        let line = {  
                normal:{  
                    length:1
                }  
            }
        this.goodsType = []
        for(let i=0;i<res.result.length;i++){
           let itemStyle = {color: colors[i]}
           res.result[i].type = this.$options.filters["GOOD_NEY_TYPE"](res.result[i].goodType,res.result[i].subGoodType)
           this.goodsType.push({name:res.result[i].type,value:res.result[i].goodWeight,itemStyle:itemStyle,labelLine:line})
        }
      })
       // 本月运营质量监测
      getTmOrderStateSumVo().then(res=>{
        this.wanchenglvNum =  Math.round(res.result.complete)  
        this.huosunNum     =  Math.round(res.result.cargoDamag  )  
      })
      // 累计交易额
      getOrderSumVo().then(res=>{
        if(res.success){
          this.estimateAmt = Math.round(res.result.estimateAmt) + ''
        }
      })
    }
  },
  watch: {},
  created() {
    this.getData()
    setInterval(this.getData, 1000*5*60)
   
  },
  // destroyed() {
  //   let this_ = this;
  //   window.removeEventListener("resize", this_.charResize, true);
  // }
};
</script>
